<script setup>
import { reactive } from 'vue'
import PopUp from "@/components/Tool/PopUp.vue"
import NoteModel from "./TimeLineComps/NoteModel.vue"

const Note = window.Note
const notes = Note.getNotesWithImgs()
const BucketURL = window.BucketURL

const column = reactive([[], [], []])  // 分为3列

for (const key in notes) column[key % 3].push(notes[key])




// 点击图片弹出对应的note框
const isShow = reactive({ value: false, note: null })
const showNoteModel = (note) => {
  console.log(note)
  isShow.note = note
  isShow.value = true
}

</script>

<template>
  <div class="container">
    <div class="column">
      <div class="item" v-for="note in column[0]" :key="note" @click="showNoteModel(note)">
        <img :src="BucketURL + '/compress-imgs/' + note.noteImgs[0]" />
      </div>
    </div>
    <div class="column">
      <div class="item" v-for="note in column[1]" :key="note" @click="showNoteModel(note)">
        <img :src="BucketURL + '/compress-imgs/' + note.noteImgs[0]" />
      </div>
    </div>
    <div class="column">
      <div class="item" v-for="note in column[2]" :key="note" @click="showNoteModel(note)">
        <img :src="BucketURL + '/compress-imgs/' + note.noteImgs[0]" />
      </div>
    </div>
  </div>

  <PopUp :isShow="isShow" isExitClickMask="true">
    <NoteModel :note="isShow.note" style="margin:auto 20px"></NoteModel>
  </PopUp>
</template>

<style scoped lang="less">
.container {
  display: flex;

  .column {
    margin: 3px;
    display: inline-block;
  }

  .item {
    transition: 0.5s;

    &:hover {
      transform: scale(1.05);
    }

    img {
      width: 100%;
      max-height: 400px;
      object-fit: cover;
    }
  }

}
</style>

<!-- <style>

::v-deep(.window) {
  border-color: 5px solid red;
  max-width: 300px;
}
</style> -->